<template>
  <view class="border padding-tb-30">
    <view class="flex-row">
      <l-avatar :avatar="item.userAvatar" />

      <view class="flex-item margin-left-20">
        <view class="flex-row justify-between margin-bottom-12">
          <text class="text-28 color-t1">{{ item.userPhone }}</text>
          <text class="text-28 color-t2">{{ item.createTime }}</text>
        </view>
        <tui-rate :current="item.appraiseScore" :hollow="true" :size="20" disabled :normal="colorBorder" :active="colorWarning" />
      </view>
    </view>

    <view v-if="item.tagList.length" class="margin-top-20 flex-row flex-wrap">
      <view v-for="(item,index) in item.tagList" :key="index" :class="{'margin-right-10':index+1!=item.tagList.length}">
        <l-tag :text="item.name" font-size="24rpx" />
      </view>
    </view>

    <view class="margin-top-20" :class="{'margin-bottom-20':item.imgs.length}">
      <text class="text-30 color-t1">{{ item.comment || '此用户未填写评价' }}</text>
    </view>

    <view v-if="item.imgs.length" class="flex-row flex-wrap">
      <image v-for="(src, index) in item.imgs" :key="index" class="pic" lazy-load mode="aspectFill" :src="src" @click="viewPic(index)" />
    </view>
  </view>
</template>

<script>
import colors from '@/common/colors'
import { viewImage } from '@/common/util'
export default {
  name: 'AppriseItem',
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      labels: [],
      colorWarning: colors.colorWarning,
      colorBorder: colors.colorBorder
    }
  },
  methods: {
    viewPic(inx) {
      viewImage(inx, this.item.imgs)
    }
  }
}
</script>

<style scoped lang="scss">
@include setMargin(bottom,12);

.border{
  border-bottom: 1rpx solid $color-border;
}

.pic {
  width: 223rpx;
  height: 150rpx;
  margin-top:10rpx;
  margin-right:10rpx;
  border-radius:$radius-default;
}
.pic:nth-child(3n){
  margin-right:0;
}
</style>
